window.onload = function (){
    //---------------------------获取节点------------------------------
    var table = document.getElementById("table");
    var box = document.getElementById("box");
    var btn = document.getElementById("btn");
    //--------------------------初始化变量-------------------------------
    var qipuWH = 15 ;//初始化10*10表格,每个宽高50px
        var qipuWidth = qipuWH ;
        var qipuHeight = qipuWH ;
    
    var arr = new Array(qipuWH+1);//创建表盘数组
    var heibai = new Array(qipuWH+1);//保存黑白，白0黑1
    var NodeSave = [];
    loading();
    function loading(){//赋值数组用于记录黑白色
        for(var i = 0 ; i < qipuWH+1 ; i++ ){
            arr[i] = new Array(qipuWH+1);
            heibai[i] = new Array(qipuWH+1);
            for(var j = 0  ; j < qipuWH+1 ; j++ ){
                arr[i][j] = 0 ;
                heibai[i][j] = 2 ;
            }
        }
    }

    // console.log(arr);

    //----------------------------封装函数------------------------------
    
    function setTableWH(){//设置表格宽高
        table.width = 50 * qipuWidth + "px" ;
        // table.height = 48 * qipuHeight + "px" ;
        table.setAttribute("height",50 * qipuHeight + "px");
    }
    setTableWH();
    // setTableWH();//
    function setTableTdWH(node){//设置td节点宽高
        node.setAttribute("width",49 + "px");
        node.setAttribute("height",48 + "px"); 
    }
    
    
    function createTable(){//创建行列
        for(var i = 0 ; i < qipuWidth ; i++ ){
            var tr = document.createElement("tr");
            for( var j = 0 ; j < qipuHeight ; j++ ){
                var td = document.createElement("td");
                setTableTdWH(td);
                tr.appendChild(td);
            }
            table.appendChild(tr);
        }
    }
    createTable();//
    
    //创建黑白双煞
    var color = 0 ;//白
    // var p = document.createElement("p");
    // p.className = "bai";
    // table.appendChild(p);

    table.onclick = function(e){
        var e = e || window.event ;
        
        // console.log(table.getBoundingClientRect());
        var x1 = e.clientX - table.getBoundingClientRect().left ;
        var y1 = e.clientY - table.getBoundingClientRect().top;

        // console.log(x1,y1);
        
        
        // x = x1 - 50/2;
        // y = y1 - 50/2;

        x=x1;
        y=y1;
        var shuzuX = 0 ;
        var shuzuY = 0 ;
        if(x%50<25){
            shuzuX = parseInt(x/50) ;
            x = shuzuX*50;
        }else{
            shuzuX = parseInt(x/50)+1 ;
            x = shuzuX*50;
        }

        if(y%50<25){
            shuzuY = parseInt(y/50) ;
            y = shuzuY*50;
        }else{
            shuzuY = parseInt(y/50)+1 ;
            y = shuzuY*50;
        }

        if(color == 0 ){
            if(heibai[shuzuX][shuzuY] != 2){
                return ;
            }
            var p = document.createElement("p");
            p.className = "bai";
            table.appendChild(p);
            NodeSave.push(p);
            heibai[shuzuX][shuzuY] = 0 ;
            p.style.left = x - 50/2 +"px";//赋值新坐标给棋子
            p.style.top = y - 50/2 + "px";
            judgeVictory(shuzuX,shuzuY,0);
            color = 1;
        }else if(color == 1){
            if(heibai[shuzuX][shuzuY] != 2){
                return ;
            }
            var p = document.createElement("p");
            p.className = "black";
            table.appendChild(p);
            NodeSave.push(p);
            heibai[shuzuX][shuzuY] = 1 ;
            p.style.left = x - 50/2 +"px";//赋值新坐标给棋子
            p.style.top = y - 50/2 + "px";
            judgeVictory(shuzuX,shuzuY,1);
            color = 0 ;
        }
        // p.style.left = x - 50/2 +"px";//赋值新坐标给棋子
        // p.style.top = y - 50/2 + "px";

        arr[shuzuX][shuzuY] = 1 ;
        // console.log(arr);
        
        

    }

    //判断是否结束
    function judgeVictory(x,y,hb){
        var whoWin ;
        if(hb==1) whoWin="黑色方";
        if(hb==0) whoWin="白色方"
        if(heibai[x][y] == hb){//白0
            //x轴判断  
            var count = 1 ;
            for(var i=1;(x-i)>=0;i++){
                
                // console.log(heibai[x-i][y]);
                if(heibai[x-i][y] == hb ) {
                    count++;
                    // console.log(count);
                }
                else break;
                
            }
            for(var i = 1 ; (x+i)<qipuWH+1;i++){
                if(heibai[x+i][y] == hb ) {
                    count++;
                    // console.log(count);
                }
                else break;
            }

            if(count>=5){
                alert(whoWin+"赢了！");
                return;
            }
            //y
            var count = 1 ;
            for(var i=1;(y-i)>=0;i++){
                if(heibai[x][y-i] == hb ) count++;
                else break;
            }
            for(var i = 1 ; (y+i)<qipuWH+1;i++){
                if(heibai[x][y+i] == hb ) count++;
                else break;
            }
            if(count>=5){
                alert(whoWin+"赢了！");
                return;
            }
            //左斜
            var count = 1 ;
            for(var i=1;(x-i)>=0&&(y-i)>=0&&(x-i)<qipuWH+1&&(y-i)<qipuWH+1;i++){
                if(heibai[x-i][y-i] == hb ) count++;
                else break;
            }
            for(var i = 1 ; (x+i)>=0&&(y+i)>=0&&(x+i)<qipuWH+1&&(y+i)<qipuWH+1;i++){
                if(heibai[x+i][y+i] == hb ) count++;
                else break;
            }
            if(count>=5){
                alert(whoWin+"赢了！");
                return;
            }
            //右斜
            var count = 1 ;
            for(var i=1;(x-i)>=0&&(y+i)>=0&&(x-i)<qipuWH+1&&(y+i)<qipuWH+1;i++){
                if(heibai[x-i][y+i] == hb ) count++;
                else break;
            }
            for(var i = 1 ;(x+i)>=0&&(y-i)>=0&&(x+i)<qipuWH+1&&(y-i)<qipuWH+1;i++){
                if(heibai[x+i][y-i] == hb ) count++;
                else break;
            }
            if(count>=5){
                alert(whoWin+"赢了！");
                return;
            }
        }
        

    }
    //清空
    function clearAll(){
        for(var i = 0; i < NodeSave.length ;i++){
            table.removeChild(NodeSave[i]);
        }
        NodeSave = [] ;
        var arr = new Array(qipuWH+1);//创建表盘数组
        var heibai = new Array(qipuWH+1);//保存黑白，白0黑1
        loading();
    }

    btn.onclick = function(){
        clearAll();
    }
    //打开动态棋盘效果
    var DTshuzu = [] ;
    var countX = 0 ;
    var countY = 0 ;
    var pppsave = null ;
    var fangxiang = 1 ;//向右1  向下2  向左3  向上4
    function DongTai(){
       
        for(var i = 0 ; i < qipuWH ; i++ ){
            DTshuzu[i] = new Array();
            for(var j = 0  ; j < qipuWH ; j++){
                DTshuzu[i][j] = new Array();
                DTshuzu[i][j][0] =  i * 50;
                DTshuzu[i][j][1] = j * 50;
            }
        }
        console.log(DTshuzu);
        var arrTest = [] ;
        for(var i = 0 ; i < qipuWH ; i++ ){
            arrTest[i] = new Array();
        }
        // arr[0][0] = 0 ;

        var timer = setInterval(function(){            
            if(countX >= 0 && countX <= DTshuzu.length && countY <= DTshuzu.length){
                if(pppsave){
                    table.removeChild(pppsave);
                    pppsave = null ;
                }
                var p = document.createElement("p");
                p.className = "bai";
                table.appendChild(p);
               
                pppsave = p ;
                p.style.left =  DTshuzu[countX][0][0]  +"px";//赋值新坐标给棋子
                p.style.top = DTshuzu[countX][0][1]  + "px";
                
                
            }else{
                clearInterval(timer);
            }
        },42);
        
    }
    
   //  还未写完动态效果
    // DongTai();


    /*
     function DongTai(){
       
        for(var i = 0 ; i < qipuWH ; i++ ){
            DTshuzu[i] = new Array();
            for(var j = 0  ; j < qipuWH ; j++){
                DTshuzu[i][j] = new Array();
                DTshuzu[i][j][0] =  i * 50;
                DTshuzu[i][j][1] = j * 50;
            }
        }
        console.log(DTshuzu);

        var timer = setInterval(function(){
            
            if(countX >= 0 && countX <= DTshuzu.length && fangxiang==1){
                if(pppsave){
                    table.removeChild(pppsave);
                    pppsave = null ;
                }
                var p = document.createElement("p");
                p.className = "bai";
                table.appendChild(p);
               
                pppsave = p ;
                p.style.left =  DTshuzu[countX][0][0]  +"px";//赋值新坐标给棋子
                p.style.top = DTshuzu[countX][0][1]  + "px";
                if(countX == DTshuzu.length){
                    countX = 0 ;
                }else{
                    countX++;
                }
                fangxiang = 2 ;//变化为向下方向
                
            }else if(countX >= 0 && countX <= DTshuzu.length && fangxiang==2){
                if(pppsave){
                    table.removeChild(pppsave);
                    pppsave = null ;
                }
                var p = document.createElement("p");
                p.className = "bai";
                table.appendChild(p);
               
                pppsave = p ;
                p.style.left =  DTshuzu[countX][0][0]  +"px";//赋值新坐标给棋子
                p.style.top = DTshuzu[countX][0][1]  + "px";
                countX++;
                fangxiang = 3 ;//变化为向下方向
            }
            else{
                clearInterval(timer);
            }
        },42);
        
    }
    DongTai();
    */ 
   
  
    
}